<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/regulatory.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>
	</head>
	<body>
		<div class="main" id="regulatory" v-loading="loading">
			<div class="regulatoryContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<div class="leftH">
						<div class="goback" @click="goback"><span>返回</span></div>
						{{yearMonth}} {{hoursMin}}
					</div>
					<span class="text">智慧大棚监管平台</span>
					<div class="rightH">{{weatherNow.condition}} 最高日落：{{weatherNow.tempDay}}℃   最低日落：{{weatherNow.tempNight}}℃</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem" style="height: 100%;">
							<div class="titleComm"><span>基地基础信息</span></div>
							<div class="commbg" style="height: calc(100% - 4vh);">
								<div class="commFlexH" style="justify-content: space-between;">
									<div class="commitem commitemB" style="margin-bottom:1.6vh">
										<img src="/screen/assets/images/regulatory/plate1.png" alt="" class="plateOne" />
										<div>
											<div class="num">{{baseInfo.greenhouseCnt}} <span class="unit">个</span></div>
											<div>大棚总数量</div>
										</div>
									</div>
									<div class="commitem commitemB" style="margin-bottom:1.6vh">
										<img src="/screen/assets/images/regulatory/plate2.png" alt="" class="plateOne" />
										<div>
											<div class="num">{{baseInfo.baseArea}} <span class="unit">亩</span></div>
											<div>基地总面积</div>
										</div>
									</div>
									<div class="commitem commitemB" style="margin-bottom:1.6vh">
										<img src="/screen/assets/images/regulatory/plate2.png" alt="" class="plateOne" />
										<div>
											<div class="num">{{baseInfo.greenhouseArea}} <span class="unit">亩</span></div>
											<div>种植总面积</div>
										</div>
									</div>
									<div class="commitem commitemB" style="margin-bottom:1.6vh">
										<img src="/screen/assets/images/regulatory/plate3.png" alt="" class="plateOne" />
										<div>
											<div class="num">{{baseInfo.areaUseRate}}<span class="unit">%</span></div>
											<div>土地使用率</div>
										</div>
									</div>
								</div>
								<div class="lefttitle" style="margin: 0.4vh 0 0.8vh 0;">种植种类</div>
								<div class="commFlexH commtop"  style="max-height: 16vh;">
									<div class="commitem commitemS" v-for="(item,index) in productMaps" :key="index">
										<img src="/screen/assets/images/regulatory/plate4.png" alt="" class="plateTwo" />
										<div>
											<div class="scname">{{item.name}}</div>
											<div>{{Number(item.area)}}亩</div>
										</div>
									</div>
								</div>
								<div class="lefttitle" style="margin: 0.4vh 0 0.8vh 0;">告警分析</div>
								<div class="commFlexH">
									<div class="commitem commitemSd">
										<div class="numsd" style="color: #FF501A;">{{baseInfo.alertInfo.unresolvedCnt}}</div>
										<div>未处理</div>
									</div>
									<div class="commitem commitemSd">
										<div class="numsd">{{baseInfo.alertInfo.todayAlertCnt}}</div>
										<div>今日告警</div>
									</div>
									<div class="commitem commitemSd">
										<div class="numsd">{{baseInfo.alertInfo.monthAlertCnt}}</div>
										<div>本月告警</div>
									</div>
								</div>
								<div class="zhezhuwrapper">
									<div id="alarmanalysis" class="commitem" style="margin: 1vh 0;"></div>
									<div class="lefttitle">近七日虫害数量变化趋势</div>
									<div id="sevenDays"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="tabwrapper">
							<div :class="[tabindex == 1 ? 'active':'','tabitem']" @click="handChange(1)">基本信息</div>
							<div :class="[tabindex == 2 ? 'active':'','tabitem']" @click="handChange(2)">环境监测</div>
							<div :class="[tabindex == 3 ? 'active':'','tabitem']" @click="handChange(3)">大棚状态</div>
							<div :class="[tabindex == 4 ? 'active':'','tabitem']" @click="handChange(4)">农事管理</div>
							<div :class="[tabindex == 5 ? 'active':'','tabitem']" @click="handChange(5)">设备监控</div>
						</div>
						<div id="mapView" class="mapView" ref="mapContainer"></div>
						<!-- 物理防控器械应用情况 -->
						<div class="preventionControl" v-if="tabindex == 1">
							<div class="titleComm"><span>告警处理</span></div>
							<div class="totalRightwrapper">
								<div class="tabheader">
									<div style="width: 10%;">序号</div>
									<div style="width: 15%;">告警类型</div>
									<div style="width: 50%;">详细位置</div>
									<div style="width: 25%;">告警时间</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 36px);">
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
											<div style="width: 10%;" class="alarmcon">{{item.id}}</div>
											<div style="width: 15%;" class="alarmcon">{{item.alertTypeName}}</div>
											<div style="width: 50%;" class="alarmcon">{{item.location}}</div>
											<div style="width: 25%;" class="alarmcon">{{item.alertTime}}</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
											<div style="width: 10%;" class="alarmcon">{{item.id}}</div>
											<div style="width: 15%;" class="alarmcon">{{item.alertTypeName}}</div>
											<div style="width: 50%;" class="alarmcon">{{item.location}}</div>
											<div style="width: 25%;" class="alarmcon">{{item.alertTime}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<template v-if="tabindex == '1'">
							<div class="leftItem">
								<div class="titleComm">
									<span>设备统计</span>
								</div>
								<div class="commbg commtop" style="max-height: 20vh;">
									<div class="commFlexH">
										<div class="commitem commitemSd" style="margin-bottom: 0.8vh;"
										  v-for="(item,index) in deviceMaps" :key="index"
										>
											<div class="numsd">{{item.cnt}}</div>
											<div>{{item.name}}</div>
										</div>
									</div>
								</div>
							</div>
							<div class="leftItem" style="margin: 1.4vh 0;">
								<div class="titleComm">
									<span>设备分析</span>
								</div>
								<div class="commbg">
									<div id="equipmentAnalysis"></div>
								</div>
							</div>
							<div class="leftItem" style="height: 0;flex: auto;">
								<div class="titleComm">
									<span>设备总览</span>
									<span class="subtitle">物联控制</span>
								</div>
								<div class="overivew commbg" style="height: calc(100% - 32px);">
									<div class="scrolling-container">
										<div class="scrolling-list">
											<div class="scorllitem2" v-for="(item,index) in overArr" :key="index">
												<div class="flex_l">
													<img src="/screen/assets/images/regulatory/tip.png" class="daibanimg" />
													{{item.name}}
												</div>
												<!-- 状态：active-启用中，online-在线，offline-离线 -->
												<div class="status">
													<img v-if="item.active == 'offline'" src="/screen/assets/images/error.png" alt="" class="statusimg" />
													<img v-else src="/screen/assets/images/dui.png" alt="" class="statusimg" />
													{{item.active == 'offline' ? '设备离线' : '设备在线'}}
												</div>
											</div>
										</div>
										<div class="scrolling-list">
											<div class="scorllitem2" v-for="(item,index) in overArr" :key="index">
												<div class="flex_l">
													<img src="/screen/assets/images/regulatory/tip.png" class="daibanimg" />
													{{item.name}}
												</div>
												<div class="status">
													<img v-if="item.active == 'offline'" src="/screen/assets/images/error.png" alt="" class="statusimg" />
													<img v-else src="/screen/assets/images/dui.png" alt="" class="statusimg" />
													{{item.active == 'offline' ? '设备离线' : '设备在线'}}
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</template>
						<div style="display: flex;flex-direction: column;height: 100%;" v-else>
							<template v-if="tabindex == '2'">
								<div class="titleComm">
									<span>环境检测数据</span>
								</div>
								<div class="commbg">
									<div class="litterwrapper">
										<!-- 查询类型：day-当天(默认)，week-本周，month-本月 -->
										<div @click="weatherChange('day')" :class="[weatherType == 'day'?'active':'','littItem']"><span>今天</span></div>
										<div @click="weatherChange('week')" :class="[weatherType == 'week'?'active':'','littItem']"><span>本周</span></div>
										<div @click="weatherChange('month')" :class="[weatherType == 'month'?'active':'','littItem']"><span>本月</span></div>
									</div>
									<div class="lefttitle">温度</div>
									<div id="wendu"></div>
									<div class="lefttitle">湿度</div>
									<div id="shidu"></div>
									<div class="lefttitle">光照</div>
									<div id="guangzhao"></div>
								</div>
							</template>
							<template v-if="tabindex == '3'">
								<div class="titleComm">
									<span>大棚状态信息</span>
								</div>
								<div class="commbg commtop" style="max-height: 58vh;">
									<div v-for="(item,index) in greenhouseData" :key="index">
										<div class="infotitle">
											<span class="nameinfo">{{item.name}}</span>
											<!--  状态：normal 正常,maintenance 维护,disabled 禁用 -->
											<span class="statuscomm" v-if="item.status == 'normal'">运行正常</span>
											<span class="errrorcomm" v-if="item.status == 'disabled'">运行异常</span>
											<span class="errrorcomm" v-if="item.status == 'maintenance'">维护中</span>
										</div>
										<div class="infowrapper">
											<div class="infoItem">种植<span>{{item.area}}亩</span></div>
											<div class="infoItem">正常周期<span>{{item.growth_day}}天</span></div>
											<div class="infoItem">预计产量<span>{{item.output}}吨</span></div>
										</div>
										<div class="goGreenhouse" @click="goGreenHouse(item)">进大棚</div>
									</div>
								</div>
							</template>
							<template v-if="tabindex == '4'">
								<div class="titleComm">
									<span>农事任务管理</span>
								</div>
								<div class="commbg">
									<div class="infotitle">
										<span class="nameinfo">今日待办</span>
										<span class="statuscomm">{{taskData.length}}项</span>
									</div>
									<div class="infowrapper">
										<div class="scrolling-container" style="height: 10vh;">
											<div class="scrolling-list">
												<div
												  class="infoItem infoItem2" 
												  v-for="(item,index) in taskData" 
												  :key="index"
												>
													<div class="tabiconitem">
														<img src="/screen/assets/images/regulatory/tip.png" alt="" class="tabicon" />
														{{item.type_name}}
													</div>
													<span style="color: #EABB07;" v-if="item.status == 3">已完成</span>
													<span style="color: #EABB07;" v-else>
													  {{item.status == 1 ? '待完成':item.status == 2 ?'审核中':'终止'}}
													</span>
												</div>
											</div>
											<div class="scrolling-list">
												<div
												  class="infoItem infoItem2" 
												  v-for="(item,index) in taskData" 
												  :key="index"
												>
													<div class="tabiconitem">
														<!-- <img src="assets/images/regulatory/tab1.png" alt="" class="tabicon" /> -->
														{{item.type_name}}
													</div>
													<span style="color: #EABB07;" v-if="item.status == 3">已完成</span>
													<span style="color: #EABB07;" v-else>
													  {{item.status == 1 ? '待完成':item.status == 2 ?'审核中':'终止'}}
													</span>
												</div>
											</div>
										</div>
										
									</div>
									<div class="infotitle" style="margin: 0.4vh 0 0.4vh 0;">
										<span class="nameinfo">本周农事计划</span>
										<span class="statuscomm">进行中</span>
									</div>
									<div class="nongshiwrapper">
										<div class="nongtitle">
											已完成任务
											<span>{{weekData.total}}/{{weekData.finishedCnt}}</span>
										</div>
										<div style="margin: 0.8vh 0;">
											<el-progress :show-text="false" :percentage="weekData.press" :stroke-width="6" color="#7BC784" define-back-color="#32554cFF"></el-progress>
										</div>
									    <div class="nongtitle">
									    	计划完成时间<span>{{weekData.max_finish_time}}</span>
									    </div>
									</div>
									<div class="infotitle" style="margin: 0.4vh 0 0.4vh 0;">
										<span class="nameinfo">农事任务跟踪</span>
										<span class="statuscomm">进行中</span>
									</div>
									<div class="commtop" style="max-height: 20vh;">
										<div class="nongshiwrapper" v-for="(item,index) in taskData" :key="index">
											<div class="nongtitle">
												{{item.greenhouse_name}}
												<span>{{item.press}}%</span>
											</div>
											<div style="margin: 0.8vh 0 0;">
												<el-progress :show-text="false" :percentage="item.press" :stroke-width="6" color="#7BC784" define-back-color="#32554cFF"></el-progress>
											</div>
										</div>
									</div>
								</div>
							</template>	
							
							<template v-if="tabindex == '5'">
								<div class="titleComm">
									<span>设备监控状态</span>
								</div>
								<div class="commbg">
									<div class="infotitle">
										<span class="nameinfo">
											传感器状态
										</span>
										<span class="statuscomm">正在进行</span>
									</div>
									<div class="infowrapper" style="padding: 1vh;">
										<div class="commFlexH" style="justify-content: space-between;">
											<div class="commitem commitemB" style="display: block;">
												<div class="yunxingwrapper">
													温度传感器<span class="yunx">在线</span>
												</div>
												<div class="numsd">{{currentSensorData.Temp}} <span class="unit">℃</span></div>
											</div>
											<div class="commitem commitemB" style="display: block;">
												<div class="yunxingwrapper">
													湿度传感器<span class="yunx">在线</span>
												</div>
												<div class="numsd">{{currentSensorData.Humi}}<span class="unit"> %</span></div>
											</div>
											<div class="commitem commitemB" style="display: block;margin: 0;">
												<div class="yunxingwrapper">
													光照<span class="yunx">在线</span>
												</div>
												<div class="numsd">{{currentSensorData.LUX}}<span class="unit">勒克斯</span></div>
											</div>
											<div class="commitem commitemB" style="display: block;margin: 0;">
												<div class="yunxingwrapper">
													CO2传感器<span class="yunx">在线</span>
												</div>
												<div class="numsd">{{currentSensorData.CSQ}}<span class="unit">百万分之</span></div>
											</div>
										</div>
									</div>
									<div class="infotitle" style="margin-top: 0.8vh;">
										<span class="nameinfo">
											视频监控
										</span>
										<span class="statuscomm">实时监控中</span>
									</div>
									<div class="infowrapper infowrapper2" style="padding: 2vh 1.2vh;">
										<div style="width: 49%;">
											<div class="videoTitle">1号大棚</div>
											<!-- <div class="videoView"></div> -->
											<img src="/screen/assets/images/colorful/chong.png" alt="" class="videoView" />
										</div>
										<div style="width: 49%;">
											<div class="videoTitle">2号大棚</div>
											<!-- <div class="videoView"></div> -->
											<img src="/screen/assets/images/colorful/chong.png" alt="" class="videoView" />
										</div>
									</div>
									<div style="display: flex;margin: 0.8vh;">
										<div class="nameinfo">设备状态</div>
									</div>
									<div class="infowrapper" style="padding: 2vh 1.2vh ;">
										<div class="infotitle">
											<span class="nameinfo">设备运行状态</span>
											<span class="statuscomm">最近24h</span>
										</div>
										<div class="commFlexH">
											<div class="commitem commitemSd">
												<div class="numsd">{{deviceStatusData.onlineRate}}%</div>
												<div>在线率</div>
											</div>
											<div class="commitem commitemSd">
												<div class="numsd">{{deviceStatusData.activeCnt}}</div>
												<div>正常运行</div>
											</div>
											<div class="commitem commitemSd">
												<div class="numsd">{{deviceStatusData.alertRate}}%</div>
												<div>需维修</div>
											</div>
										</div>
										<!-- <div style="margin: 1.6vh 0;">
											<div class="nongtitle">
												网络状态
												<span>{{deviceStatusData.alertRate}}%</span>
											</div>
											<div style="margin: 0.8vh 0 0;">
												<el-progress :show-text="false" :percentage="50" :stroke-width="6" color="#7BC3C7" define-back-color="#32554cFF"></el-progress>
											</div>
										</div>
										<div>
											<div class="nongtitle">
												积累空间
												<span>80%</span>
											</div>
											<div style="margin: 0.8vh 0 0;">
												<el-progress :show-text="false" :percentage="50" :stroke-width="6" color="#DFB100" define-back-color="#32554cFF"></el-progress>
											</div>
										</div> -->
									</div>
								</div>
							</template>
							<template v-if="[2,3,4].indexOf(tabindex) >-1">
								<div class="titleComm" style="margin-top: 1vh;">
									<span>人工智能建议</span>
								</div>
								<div class="overivew commbg" style="height: 0;flex: auto;">
									<div class="scrolling-container">
										<div class="scrolling-list">
											<div class="scorllitem2 scorllitemai" v-for="(item,index) in aiData" :key="index">
												{{item}}
											</div>
										</div>
										<div class="scrolling-list">
											<div class="scorllitem2 scorllitemai" v-for="(item,index) in aiData" :key="index">
												{{item}}
											</div>
										</div>
									</div>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
			<!-- 大棚展示和选择 -->
			<div class="greenHouse" v-if="greenShow" v-cloak>
				<div class="greenleft">
					大棚选择
					<div 
					  v-for="(item,index) in dapengData" :key="index"
					  :class="[index==xuzeindex?'active':'','greenItem']"
					  @click="xuzeindex = index"
					>{{(index*10)+1}} - {{(index+1)*10}}#</div>
				</div>
				<div class="greenright">
					<div class="greentitle">{{biname}}</div>
					<div class="greenCon">
						<div id="mapCon" class="mapCon"></div>
						<div class="greenwrapper" >
							<div 
								:class="[idx==rinindex?'active':'','greenTab']"
								v-for="(im,idx) in dapengData[xuzeindex]" :key="idx"
								@click.stop="choosexu(im,idx)"
							>{{im.name}}</div>
						</div>
						<!-- <div class="greentip">
							<div class="titletop">
								{{chooseim.name}}
								<div class="gobackDe" @click.stop="goGreenHouse(chooseim)"><span>进入</span></div>
							</div>
							<div>蔬菜：{{chooseim.product_name}}</div>
							<div>温度：{{chooseim.temperature}}℃  <span style="margin-left:20px">湿度：{{chooseim.humidity}}%</span></div>
						</div> -->
						<!-- <img src="/screen/assets/images/regulatory/dapeng.png" alt="" class="dapeng" /> -->
					</div>
				</div>
			</div>
		</div>
		<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
		<script type="module">
			const { createApp, ref, onMounted, nextTick} = Vue;
			import { loadTMap } from '/screen/js/loadTiandituMap'
			import { pieChartFun } from "/screen/echarts/pie.js"; //饼图
			import { pieXChartFun } from "/screen/echarts/pieXChart.js"; //饼图
			import { lineAreaChartFun } from "/screen/echarts/lineAreaChart.js"; //折线图区域
			let baseUrl = 'https://sxadmin.sxgkx.cn/STleXfFAvV.php/screen/'
			let color = ['#bf1a20','#1c3f97','#62b62f','#ebe958','#ce8d10','#7b5ca5','#971e23','#d69619','#a34b98']
			createApp({
				setup() {
					let bid = null //基地id
					let greenhouseId = null //大棚id
					const baseInfo = ref({
						alertInfo: {},
						areaUseRate: "",
						baseArea: 0,
						greenhouseArea: '',
						greenhouseCnt: '',
					})
					const mapContainer = ref()
					const weatherNow = ref({}) //今日天气
					const alertData = ref([])
					const overArr = ref([])
					const productMaps = ref([])
					const deviceMaps = ref([]) //设备统计
					const tabindex = ref(1)
					const weatherType = ref('day')
					const aiData = ref([])
					const greenhouseData = ref([])
					const todayDai = ref([]) //今日待办数据
					const weekData = ref({}) //本周农事任务
					const hoursMin = ref('00:00');
					const yearMonth = ref('');
					const taskData = ref([])
					const deviceStatusData = ref({}) //设备状态
					const currentSensorData = ref({}) //当前传感器数据列表
					let timer = null;
					let map = null;
					let mapCon = null;
					const mapLoaded = ref(false);
					const center = ref([116.397428, 39.90923]); // 北京中心点
					const zoom = ref(14);
					const markers = ref([]);
					let labels = []; // 存储标签实例
					const hoveredPolygon = ref(null);
					const selectedPolygon = ref(null);
					const baseArr = ref([]) //基地数据
					const fenye = ref(0)
					const xuzeindex = ref(0)
					const rinindex = ref(0)
					const dapengData = ref([])
					const chooseim = ref({}) //选择的大棚
					const greenShow = ref(false)
					const loading = ref(false)
					const biname = ref('');
					const polygons = ref([]);
					const polygonsData = ref([])
					const labelArr = ref([])
					onMounted(() => {
						nextTick(()=>{
							Promise.all([
								loadTMap()
							]).then(() => {
								if (map) {
									// this.destructionTMap()
								} else {
									initMap()
								}
							})
						})
						// 今日天气
						$.ajax({
							url: baseUrl + 'weather/today',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								weatherNow.value = data.data
							},
						})
						const nowTod = new Date();
						yearMonth.value = nowTod.getFullYear() + '/' + (nowTod.getMonth() + 1) + '/' +nowTod.getDate() +'日'
						updateTime();
						timer = setInterval(updateTime, 1000);
						initAiData() //智能建议
					});
					const initMap = () => {
						let mapselect = [{
						  title: '卫星混合',
						  icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
						  layer: TMAP_HYBRID_MAP
						}]
						var zoom = 13;
						map = new T.Map("mapView");
						map.enableScrollWheelZoom();
                        map.centerAndZoom(new T.LngLat(105.342487,37.53904), zoom); //设置中心和缩放级别
						map.setMapType(window.TMAP_HYBRID_MAP); //设置地图类型
						initMapData()
					};
					
					// 加载地图数据
					const initMapData = () =>{
						// 基地列表
						$.ajax({
							url: baseUrl + 'base/baseLists',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								bid = data.data.list[0].id
								biname.value = data.data.list[0].name
								initleftData()
								polygonsData.value = data.data.list
								data.data.list.forEach((item,index)=>{
									if(item.locate  && item.locate.length ){
										let points = []
										item.locate.forEach(lna=>{
											points.push(new T.LngLat(Number(lna.lng),Number(lna.lat)))
										})
										// 画出多边形
										var polygon = new T.Polygon(points,{
											color: color[index], 
											weight: 10, 
											opacity: 1, 
											fillColor: color[index], 
											fillOpacity: 1,
											customId:item.id,
											name:item.name,
										});
										const centerPoint = polygon.getBounds().getCenter();
										var label = new T.Label({
											text: item.name,
											position: centerPoint,
											offset: new T.Point(-50, -8),
										});
										label.setFontColor('white')
										label.getFontSize('10px')
										label.setBackgroundColor(color[index])
										label.setBorderColor(color[index])
										map.addOverLay(polygon);
										map.addOverLay(label);
										polygons.value.push(polygon)
										labelArr.value.push(label)
										label.on('click', () => {
											tandPeng()
										})

										if(index == 0){
											polygon.setColor('rgba(54, 233, 231, 1)')
											polygon.setFillColor('rgba(54, 233, 231, 1)')
											label.setLabel(item.name + '<br/>查看大棚>>')
											label.setOffset(new T.Point(-50, -30))
										}
										// 监听多边形点击事件
										bindPolygonEvents(polygon,label)
									}
								})
								// 设置中心点
								centerMap(data.data.list)
							},
						})
					}
					// 居中显示所有覆盖物
					const centerMap = (polygons) => {
						if (polygons.length === 0) return;
						
						// 计算所有多边形的边界
						let minLng = Infinity, maxLng = -Infinity;
						let minLat = Infinity, maxLat = -Infinity;
						
						polygons.forEach(poly => {
							poly.locate.forEach(point => {
								minLng = Math.min(minLng, Number(point.lng));
								maxLng = Math.max(maxLng, Number(point.lng));
								minLat = Math.min(minLat, Number(point.lat));
								maxLat = Math.max(maxLat, Number(point.lat));
							});
						});
						
						// 计算中心点
						let centerPointlng = (minLng + maxLng) / 2;
						let centerPointlat = (minLat + maxLat) / 2;
						
						// 设置地图中心点和缩放级别
						map.panTo(new T.LngLat(centerPointlng, centerPointlat));
						// 更新缩放级别显示
						map.getZoom();
					}
					/**基地基础统计信息
					 * 左侧的内容
					 */
					const initleftData = ()=>{
						$.ajax({
							url: baseUrl + 'base/info',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								baseInfo.value = data.data.info
								productMaps.value  = baseInfo.value.productMaps
								nextTick(() => {
									// 告警分析
									let pieCharts = echarts.init(document.getElementById('alarmanalysis'));
									pieCharts.setOption(pieChartFun(baseInfo.value.alertInfo.alertMaps,{
										radius:'82%',
										unit:'次'
									}));
									loading.value = false
									// 近七日虫害数量变化趋势
									initBaseDataOne() //一进来加载第一个数据
								})
							},
						})
					}
					// 获取大棚screen/base/greenhouseLists
					const tandPeng = ()=>{
						$.ajax({
							url: baseUrl + 'base/greenhouseLists',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								baseArr.value = data.data.list
								dapengData.value = chunkArray(data.data.list,10)
								fenye.value = Math.ceil(data.data.list.length / 10)
								chooseim.value = baseArr.value[0]
								greenShow.value = true
								nextTick(() => {
									let mapselect = [{
										title: '卫星混合',
										icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
										layer: TMAP_HYBRID_MAP
									}]
									mapCon = new T.Map("mapCon");
									mapCon.enableScrollWheelZoom();
									mapCon.centerAndZoom(new T.LngLat(105.342499,37.540807), 16); //设置中心和缩放级别
									mapCon.setMapType(window.TMAP_HYBRID_MAP); //设置地图类型
									choosexu(baseArr.value[0],0)
								})
							},
						})
					}
					// 点击某一个大棚
					const choosexu = (im,index) =>{
						var points = [];
						points.push(new T.LngLat(105.342499,37.540807))	
						points.push(new T.LngLat(105.342450,37.540593))	
						points.push(new T.LngLat(105.342469,37.540441))	
						points.push(new T.LngLat(105.342485,37.540204))	
						points.push(new T.LngLat(105.342470,37.540067))		
						points.push(new T.LngLat(105.342482,37.539794))	
						points.push(new T.LngLat(105.343486,37.539662))	
						points.push(new T.LngLat(105.342485,37.53943))
						points.push(new T.LngLat(105.342482,37.539287))	
						points.push(new T.LngLat(105.342487,37.53904))
						points.push(new T.LngLat(105.342592,37.540012))	
						points.push(new T.LngLat(105.342612,37.539849))	
						points.push(new T.LngLat(105.342623,37.539666))	
						points.push(new T.LngLat(105.342602,37.539396))	
						points.push(new T.LngLat(105.342584,37.539222))	
						points.push(new T.LngLat(105.342602,37.539048))	
						points.push(new T.LngLat(105.342584,37.538881))	
						points.push(new T.LngLat(105.342602,37.538715))	
						points.push(new T.LngLat(105.342696,37.538537))	
						points.push(new T.LngLat(105.342592,37.53828))
						points.push(new T.LngLat(105.342605,37.538202))	
						points.push(new T.LngLat(105.343486,37.540029))
						var polygon = new T.Polygon(points,{
							color: "#FFFFFF", weight: 10, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 1
						});
						mapCon.addOverLay(polygon);
						chooseim.value = im
						rinindex.value = index
						let info = '<div class="greentip"><div class="titletop">'
							info += im.name+'<div class="gobackDe" id="gobackDe'+im.id+'"><span>进入</span></div></div>'
							info += '<div>蔬菜：'+im.product_name+'</div>'
							info += '<div> 温度：'+im.temperature+'℃  <span style="margin-left:20px">湿度：'+im.humidity+'%</span></div>'
						var infoWindow = new T.InfoWindow(info,{closeButton:false});
						mapCon.openInfoWindow(infoWindow, new T.LngLat(105.342499,37.540807)); //开启信息窗口
						var button = document.querySelector('#gobackDe'+im.id); // 获取按钮元素
						button.addEventListener('click', goGreen); // 添加事件监听器
					}
					const goGreen = () =>{
						console.log('lllll')
						loading.value = false
						window.location.href='./industryResources.html?gid='+chooseim.value.id
					}
					const chunkArray = (array, size)=>{
					    let result = [];
					    for (let i = 0; i < array.length; i += size) {
					        result.push(array.slice(i, i + size));
					    }
					    return result;
					}
					// 为多边形绑定交互事件
					const bindPolygonEvents = (polygon,label) => {
						// 点击事件
						polygon.on('click', () => {
							// 重置所有多边形的颜色和边框颜色为默认值（或其他样式）
							polygons.value.forEach((p,index) => {
								p.setFillColor(color[index])
								p.setColor(color[index])
							});
							labelArr.value.forEach((lItm,index) => {
								lItm.setLabel(lItm.options.text)
								lItm.setOffset(new T.Point(-50, -8))
							});
							polygon.setColor('rgba(54, 233, 231, 1)')
							polygon.setFillColor('rgba(54, 233, 231, 1)')
							bid = polygon.options.customId
							biname.value = polygon.options.name
							loading.value = true
							initleftData()
							selectedPolygon.value = polygon.options.name;
							label.setLabel(polygon.options.name + '<br/>查看大棚>>')
							label.setOffset(new T.Point(-50, -30))
						});
					};
					
					// 设备统计 第一个tab 
					const initBaseDataOne = () =>{
						// 预警列表
						$.ajax({
							url: baseUrl + 'base/alertLists',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								alertData.value  = data.data.list
							},
						})
						// 设备分析
						let pieCharts2 = echarts.init(document.getElementById('equipmentAnalysis'));
						$.ajax({
							url: baseUrl + 'base/deviceStats',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								nextTick(()=>{
									pieCharts2.setOption(pieXChartFun(data.data.devicePies,{
										color:'rgba(0, 122, 59, 0.2)'
									}));
								})
							},
						})
						
						// 设备总览
						$.ajax({
							url: baseUrl + 'base/deviceLists',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								overArr.value = data.data.list
							},
						})
						
						// 设备统计
						$.ajax({
							url: baseUrl + 'base/deviceStats',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								deviceMaps.value  = data.data.deviceMaps
							},
						})
						
						let lineAreaCharts = echarts.init(document.getElementById('sevenDays'));
						let data = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: false,
							left:'1%',
							top:'10%',
							// name:'单位：',
							unit: '单位：',
							color: [
								['rgba(0, 0, 0, 1)', 'rgba(0, 204, 210, 0.22)',
									'rgba(0, 204, 210, 0.62)'
								]
							],
							yData: [{
								name: "基础数据",
								value: [40, 45, 50, 60, 90],
							}]
						}
						lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineAreaChartFun(data))));
					}
					// 设备统计 第二个tab 
					const initBaseDataTwo = () =>{
						weatherChange('day')
					}
					// 大棚状态 第三个tab
					const initBaseDataThere = () =>{
						// 大棚列表
						$.ajax({
							url: baseUrl + 'base/greenhouseLists',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								greenhouseData.value = data.data.list
							},
						})
					}
					
					// 农事任务管理 第四个tab
					const initBaseDataFour = () =>{
						// 农事任务列表
						$.ajax({
							url: baseUrl + 'base/taskLists',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								// "operated_at": "2025-06-21 14:33:38",        任务开始时间
								// "completed_at": "2025-06-21 14:33:38",        任务结束时间
								data.data.list.forEach(item=>{
									if(new Date() > new Date(item.completed_at)){
										item.press = 100
									} else {
										// （当前时间 - 开始时间）/ (结束时间 - 开始时间)
										let cha1 = new Date () - new Date(item.operated_at)
										let cha2 = new Date (item.completed_at) - new Date(item.operated_at)
										item.press = (cha1 / cha2).toFixed(2)
									}
									
								})
								taskData.value = data.data.list
							},
						})
						// 本周农事任务
						$.ajax({
							url: baseUrl + 'base/taskWeekStats',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								weekData.value = data.data
								weekData.value.press = ((Number(data.data.total) / Number(data.data.finishedCnt)) * 100).toFixed(2)
								// console.log(data)
							},
						})
					}
					
					// 第五个tab 设备控制
					const initBaseDataFive = () =>{
						// 当前传感器数据列表
						$.ajax({
							url: baseUrl + 'base/currentSensorList',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								// console.log(data,'datadata')
								currentSensorData.value = data.data.list[0]
							},
						})
						// 当前设备状态
						$.ajax({
							url: baseUrl + 'base/currentDeviceStats',
							type: 'GET',
							data:{bid:bid},
							timeout: 15000,
							success: function(data) {
								deviceStatusData.value = data.data
							},
						})
					}
					// 温度 湿度 光照三个折线图
					const weatherChange = (type) =>{
						weatherType.value = type
						let lineAreaChartswendu = echarts.init(document.getElementById('wendu'));
						let lineAreaChartsshidu = echarts.init(document.getElementById('shidu'));
						let lineAreaChartsguangzhao = echarts.init(document.getElementById('guangzhao'));
						$.ajax({
							url: baseUrl + 'weather/baseLineStats',
							type: 'GET',
							data:{bid:bid,type:type},
							timeout: 15000,
							success: function(data) {
								let obj = {
									left:'1%',
									top:'10%',
									unit: '单位：',
								}
								// tempLine 温度
								// console.log(data)
								let color = [
									['rgba(0, 204, 210, 0.2)', 'rgba(0, 204, 210, 0.4)',
										'rgba(0, 204, 210, 1)'
									],['rgba(151, 76, 8, 0.2)', 'rgba(151, 76, 8, 0.8)',
										'rgba(151, 76, 8, 1)'
									],
								]
								nextTick(()=>{
									lineAreaChartswendu.setOption(JSON.parse(JSON.stringify(lineAreaChartFun({
										...data.data.tempLine,
										...obj,
										color: color,
									}))));
									// humidityLine  湿度
									lineAreaChartsshidu.setOption(JSON.parse(JSON.stringify(lineAreaChartFun({
										...data.data.humidityLine,
										...obj,
										color: color,
									}))));
									// 光照 uviLine
									lineAreaChartsguangzhao.setOption(JSON.parse(JSON.stringify(lineAreaChartFun({
										...data.data.uviLine,
										...obj,
										color: color,
									}))));
								})
							},
						})
					}
					
					// 智能建议
					const initAiData = () =>{
						$.ajax({
							url: baseUrl + 'base/aiService',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								aiData.value = data.data.services
							},
						})
					}
					// 进入大棚
					const goGreenHouse = (item)=>{
						console.log('llllll')
						loading.value = false
						// window.location.href='./industryResources.html?gid='+item.id
					}
					const handChange = (type) =>{
						tabindex.value = type
						nextTick(()=>{
							if(type == 1){
								initBaseDataOne()
							}
							if(type == 2){
								initBaseDataTwo() //环境监测
							}
							if(type == 3){
								initBaseDataThere() //大棚状态
							}
							if(type == 4){
								initBaseDataFour() //农事任务管理
							}
							if(type == 5){
								initBaseDataFive() //设备监控
							}
						})
						
					}
					
					// 计算多边形中心点
					const getPolygonCenter = (path) => {
					  let x = 0, y = 0;
					  const len = path.length;
					  
					  for (let i = 0; i < len; i++) {
						x += path[i][0];
						y += path[i][1];
					  }
					  
					  return [x / len, y / len];
					};
					
					const updateTime = () => {
					  const now = new Date();
					  hoursMin.value = formatTimeUnit(now.getHours()) + ':' + formatTimeUnit(now.getMinutes())
					};
					
					const formatTimeUnit = (unit) => {
					  return unit < 10 ? '0' + unit : unit.toString();
					};
					const goback = () =>{
						window.location.href='./ListRenovation.html'
					}
					return {
						baseInfo,
						alertData,
						productMaps,
						deviceMaps,
						overArr,
						tabindex,
						weatherType,
						aiData,
						greenhouseData,
						weekData,
						yearMonth,
						hoursMin,
						deviceStatusData,
						taskData,
						currentSensorData,
						weatherChange,
						handChange,
						weatherNow,
						baseArr,
						fenye,
						dapengData,
						xuzeindex,
						rinindex,
						chooseim,
						choosexu,
						greenShow,
						loading,
						goback,
						biname,
						goGreenHouse 
					};
				}
			}).use(ElementPlus).mount('#regulatory');
		</script>
	</body>

</html>